import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import router from '@/router'

// 创建一个axios实例service，可以通过实例来请求接口
const service = axios.create({
  // 基地址
  baseURL: 'https://api-hmzs.itheima.net/v1',
  // 超时时间
  timeout: 5000 // request timeout
})

// 请求拦截器
service.interceptors.request.use(
  // 箭头函数，config是参数
  config => {
    // config携带的就是请求信息，并且return不能省略
    // 通常该函数内配置请求头，携带token
    const token = store.state.user.token
    if (token) {
      config.headers.Authorization = token // 实际上需要的还是“Bearer token”格式，但这次是由后端进行拼接的，前端接口没要求
    }
    return config
  },
  // 箭头函数，err是参数
  error => {
    // 请求发生错误时执行该函数
    return Promise.reject(error)
  }
)

// 响应拦截器
// 服务端返回数据时，数据流转的第一站就是响应拦截器
service.interceptors.response.use(
  response => {
    // 响应成功（状态为2XX），执行该函数
    // 这里的return也不能省略
    // console.log(response)
    // Message.success(response.data.msg)
    // 由于一进入网站就会发送请求渲染页面，如果在这里添加吐司提示，就会莫名其妙弹出“操作成功”（一刷新页面就弹），所以成功信息不适合在这里加

    // 演示数据不允许删除，删除时应该提示错误信息，但实际上提示的是删除成功，这里优化一下
    // 状态码为50000说明删的是演示数据
    // console.log('响应拦截器中的数据', response.data)//用于测试返回结果的路径
    if (response.data.code === 50000) {
      Message.error(response.data.msg)
      // 出现这个错误，不希望执行页面后续的操作，所以得返回一个reject，因为async\await只能接收正确结果
      return Promise.reject() // 括号里的值是为了让try\catch拿到信息，传的是什么值，catch捕获的就是什么值，如果不用try\catch可以不传
    }
    return response.data // response.data是后端返回的原始数据
  },
  error => {
    // 响应失败（状态为4XX-5XX），执行该函数
    // 可以在该函数内进行统一的错误处理
    console.dir(error)
    // PC端token一般是滑动过期，移动端token一般不会过期（会自动刷新）
    // 通过状态码来判断token是否过期
    if (error.response.status === 401) {
      // 清空token并重新登录
      store.commit('user/removeToken') // 得先清空token才能跳转回登录界面
      router.push('/login')
    }
    Message.error(error.response.data.msg)
    return Promise.reject(error) // 括号里的值是为了让try\catch拿到信息，传的是什么值，catch捕获的就是什么值，如果不用try\catch可以不传值
  }
)

export default service
